import { NavLink } from 'react-router-dom';
import { useTheme } from '@/hooks/useTheme';

export const Navigation = () => {
  const { isDark, toggleTheme } = useTheme();
  
  return (
    <nav className={`sticky top-0 z-10 py-4 px-4 sm:px-6 lg:px-8 border-b backdrop-blur-md bg-opacity-90 ${isDark ? 'bg-gray-800/90 border-gray-700' : 'bg-white/90 border-gray-200'}`}>
      <div className="max-w-4xl mx-auto flex items-center justify-between">
        <div className="flex items-center justify-center space-x-6">
          <NavLink 
            to="/"
            className={({ isActive }) => 
              `px-4 py-2 rounded-lg transition-colors text-sm font-medium ${
                isActive 
                  ? 'bg-blue-500 text-white' 
                  : isDark 
                    ? 'text-gray-300 hover:bg-gray-700' 
                    : 'text-gray-600 hover:bg-gray-100'
              }`
            }
          >
            <i className="fa-solid fa-qrcode mr-2"></i>
            二维码生成
          </NavLink>
          
          <NavLink 
            to="/encoder-decoder"
            className={({ isActive }) => 
              `px-4 py-2 rounded-lg transition-colors text-sm font-medium ${
                isActive 
                  ? 'bg-blue-500 text-white' 
                  : isDark 
                    ? 'text-gray-300 hover:bg-gray-700' 
                    : 'text-gray-600 hover:bg-gray-100'
              }`
            }
          >
            <i className="fa-solid fa-lock mr-2"></i>
            加密解密工具
          </NavLink>
        </div>
        
        {/* 全局主题切换按钮 */}
        <button 
          onClick={toggleTheme}
          className={`p-2 rounded-full ${isDark ? 'bg-gray-700 hover:bg-gray-600' : 'bg-gray-100 hover:bg-gray-200'} transition-colors`}
          aria-label={isDark ? '切换到亮色模式' : '切换到暗色模式'}
        >
          <i className={`fa-solid ${isDark ? 'fa-sun' : 'fa-moon'} text-lg`}></i>
        </button>
      </div>
    </nav>
  );
};